<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>客户管理系统登录</title>
    <link rel="icon" type="imgae/png" href="images/tx.png">
    <!--<link rel="stylesheet" href="index/css/login.css">-->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <link rel="stylesheet" href="index/css/login.css">
    <script src="index/js/login.js"></script>
    <script src="js/security.js"></script>
    <script src="js/requestUtil.js"></script>
    <script src="js/bootStrap/bootstrap.min.js"></script>
</head>
<style>
    canvas{
        margin: 0 auto;
    }
</style>
<body>
    <div class="loginText">
       <canvas id="canvas"></canvas>
      <script>var txt = "学习平台客户管理系统";
      var txtH = 90;
      var font = "sans-serif";
      // var font ="Brush Script Std";
      var bg = "#000";
      var rayColor1 = "#e0f7fa";
      var rayColor2 = "#00ff00";
      var fade = 1000;
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var cw = canvas.width =window.innerWidth;
      var ch = canvas.height ;
      var w2 = cw/2;
      var h2 = ch/2;
      var pi = Math.PI;
      var pi2 = pi*.5;

      var txtCanvas = document.createElement("canvas");
      var txtCtx = txtCanvas.getContext("2d");
      txtCtx.font = txtH + "px " + font;
      txtCtx.textBaseline = "middle";
      var txtW = Math.floor(txtCtx.measureText(txt).width);
      txtCanvas.width = txtW;
      txtCanvas.height = txtH*1.5;

      var gradient = ctx.createRadialGradient(w2, h2, 0, w2, h2, txtW);
      gradient.addColorStop(0, rayColor2);
      gradient.addColorStop(1, rayColor2);
      ctx.strokeStyle = gradient;

      txtCtx.fillStyle = gradient;
      txtCtx.font = txtH + "px " + font;
      txtCtx.textBaseline = "middle";
      txtCtx.fillText(txt,0,txtH*.5);

      //dirty adjust for descends
      txtH *= 1.5;

      var bufferCanvas = document.createElement("canvas");
      bufferCanvas.width = txtW;
      bufferCanvas.height = txtH;
      var buffer = bufferCanvas.getContext("2d");

      //text start position
      var sx = (cw-txtW)*0.5
      var sy = (ch-txtH)*0.5

      ////generate data
      var rays = [];
      var txtData = txtCtx.getImageData(0,0,txtW,txtH);
      for (var i = 0; i < txtData.data.length; i+=4) {
          var ii = i/4;
          var row = Math.floor(ii/txtW)
          var col = ii%txtW
          var alpha = txtData.data[i+3]
          if(alpha !== 0){
              var c = "rgba("
              c += [txtData.data[i],txtData.data[i+1],txtData.data[i+2], alpha/255 ]
              c += ")";
              rays.push(new Ray(Math.floor(ii/txtW), ii%txtW, c));
          }
      }
      var current = 1;
      //start animation
      tick();


      function tick() {
          ctx.clearRect(0,0,cw,ch)
          ctx.drawImage(bufferCanvas, 0, 0, current, txtH, sx, sy, current, txtH)
          ctx.save()
          ctx.globalAlpha = .07;
          ctx.globalCompositeOperation = "lighter";
          if(drawRays(current)){
              current++;
              current = Math.min(current, txtW)
              window.requestAnimationFrame(tick)
          }else{
             // fadeOut()
          }
          ctx.restore()
      }

//       function fadeOut(){
//           ctx.clearRect(0,0,cw,ch)
//           ctx.globalAlpha *= .95;
//           ctx.drawImage(bufferCanvas, 0, 0, current, txtH, sx, sy, current, txtH)
//           if(ctx.globalAlpha > .01){
//          window.requestAnimationFrame(fadeOut)
//           }else{
//               window.setTimeout(restart, 400)
//           }
//       }

      function restart(){
          for(var i = 0; i < rays.length; i++){
              rays[i].reset()
          }
          ctx.globalAlpha = 1
          buffer.clearRect(0,0,txtW,txtH)
          current = 1;
          tick();
      }
      function drawRays(c){
          var count = 0;
          ctx.beginPath()
          for(var i = 0; i < rays.length; i++){
              var ray = rays[i];
              if(ray.col < c){
                  count += ray.draw()
              }
          }
          ctx.stroke()
          return count !== rays.length;
      }
      function filterRays(r){
          return Boolean(r);
      }

      function Ray(row, col, f) {
          this.col = col;
          this.row = row;

          var xp = sx + col;
          var yp = sy + row;
          var fill = f;

          var ath = (txtH / 1.5)

          var a = pi2 * (this.row - ath * .5) / ath;
          if (a === 0) {
              a = (Math.random() - .5) * pi2;
          }
          var da = .02 * Math.sign(a);
          da += (Math.random() - .5) * .005;
          var l = 0;
          var dl = Math.random() * 2 + 2;

          var buffered = false;
          this.reset = function () {
              a = pi2 * (this.row - ath * .5) / ath;
              if (a === 0) {
                  a = -pi2 * .5;
              }
              l = 0;
              buffered = false
          }
          this.draw = function () {
              if (l < 0) {
                  if (!buffered) {
                      buffer.fillStyle = fill;
                      buffer.fillRect(this.col, this.row, 1, 1);
                      buffered = true
                  }
                  return 1;
              } else {
                  ctx.moveTo(xp, yp)
                  ctx.lineTo(xp + Math.cos(a) * l, yp + Math.sin(a) * l);
                  a += da;
                  l += Math.cos(a) * dl;
                  return 0;
              }
          }
      }
      </script>
    </div>
     <div class="context">
        <div>
         <form  id="loginForm">

        <div class="loginPlan">
                <h3  class="loginText">登录</h3>
            <div class="form-group">
                <span class="glyphicon glyphicon-user"></span>
                <input type="text" class="form-control" id="user_account" name="user_name" placeholder="请输入名称">
            </div>
            <div class="form-group">
                <span class="glyphicon glyphicon-lock"></span>
                <input type="hidden" class="form-control" id="user_password" name="user_password" placeholder="请输入密码">
                <input type="password" class="form-control" id="user_password_submit" name="user_password_submit" placeholder="请输入密码">
            </div>
            <div>
                <input class="btn btn-lg button" type="button" id="submitLogin" value="登录">
            </div>
        </div>
        </form>
        </div>
     </div>
</body>

</html>